<template>
  <!-- 选择预约时间 -->
  <el-dialog
    title="预约时间"
    :visible="value"
    width="700px"
    custom-class="dialog-box"
    @close="onClose"
    @open="onOpen"
    :close-on-click-modal="false"
    :append-to-body="true"
  >
    <table border="0" width="100%">
      <tr>
        <td>
          <h3 style="margin: 0">{{ curDate | curDateStr }}</h3>
        </td>
        <td style="text-align: right">
          <el-button-group>
            <el-button @click="onStep(0)"><i class="el-icon-arrow-left"></i>上个月</el-button>
            <el-button @click="onStep(1)">下个月<i class="el-icon-arrow-right"></i></el-button>
          </el-button-group>
        </td>
      </tr>
    </table>
    <hr />
    <table border="0" width="100%" style="table-layout: fixed">
      <thead>
        <tr class="resTimeHead">
          <td>周日</td>
          <td>周一</td>
          <td>周二</td>
          <td>周三</td>
          <td>周四</td>
          <td>周五</td>
          <td>周六</td>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in tableList" :key="index">
          <td v-for="(item2, index2) in item" :key="index2">
            <div
              v-if="!item2.isEmpty"
              :class="['item-box', itemIndex == index + '-' + index2 ? 'item-box-cur' : '']"
              @click="onChlikItem(item2, index, index2)"
            >
              <div>{{ item2.date | toTimeStr }}</div>
              <div v-if="item2.remainSourceCount">号源:{{ item2.remainSourceCount }}</div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
    <hr />
    <div>
      <div><strong>号源信息：</strong> <span v-if="haoSource.length == 0">请选择一个日期</span></div>
      <br />
      <div>
        <el-tag
          v-for="(item, index) in haoSource"
          :key="index"
          :type="curTimeObj.index == index ? 'success' : 'info'"
          @click="onClickTime(item, index)"
          style="margin: 0 10px 10px 0; cursor: pointer"
          >{{ item.startTime }}~{{ item.endTime }}&nbsp;&nbsp;号源：{{ item.remainSourceCount }}</el-tag
        >
      </div>
    </div>
    <span slot="footer">
      <el-button type="primary" :loading="btnLoading" @click="onSubmit">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
export default {
  props: ["value", "doctorId", "deptId", "type"],
  components: {},
  computed: {},
  filters: {
    toTimeStr(value) {
      if (value) {
        let arr = value.split("-");
        return arr[2];
      } else return "";
    },
    curDateStr(value) {
      let yue = value.getMonth() + 1;
      if (yue < 10) yue = `0` + yue;
      return `${value.getFullYear()}-${yue}`;
    },
  },
  data() {
    return {
      curObj: null, //当前选中的日期
      curDate: new Date(),
      //存储号源信息
      curTimeObj: {
        index: -1,
        obj: null,
      },
      haoSource: [], //号源时间段
      itemIndex: "", //选中的下标
      btnLoading: false,
      tableList: [],
    };
  },
  methods: {
    onSubmit() {
      let th = this;
      if (!th.curTimeObj.obj) {
        th.$message.warning("请选择号源！");
        return;
      }
      th.$emit("confirm", th.curTimeObj.obj);
      th.onClose();
    },
    //切换上下月份
    onStep(type) {
      let th = this;
      if (type == 0) {
        //上
        th.curDate.setMonth(th.curDate.getMonth() - 1, 1);
      } else {
        th.curDate.setMonth(th.curDate.getMonth() + 1, 1);
      }
      th.getDoctorScheduleByMonth();
    },
    //点击日期
    onChlikItem(obj, index, index2) {
      let th = this;
      if (obj.remainSourceCount == 0) return;
      th.itemIndex = `${index}-${index2}`;
      th.curObj = obj;
      let bo = obj.canOrder;
      if (th.type == "dj") {
        let today = th.$utils.FormatTime("yyyy-MM-dd", new Date().getTime());
        if (today == obj.date) {
          bo = obj.canRegister;
        } else {
          bo = false;
        }
      }
      if (!bo) {
        th.$message.warning("该时间段被拒绝挂号");
        th.haoSource = [];
        return;
      }
      //获取医生的号源
      let j = {
        doctorId: th.doctorId,
        dateDay: obj.date,
        deptId: th.deptId,
      };
      th.$api.getDoctorSourceByDay(j).then((res) => {
        if (res.executed) {
          th.haoSource = res.dataBody;
        }
      });
    },
    //查询医生某月排班
    getDoctorScheduleByMonth() {
      let th = this;
      th.itemIndex = "";
      let arrayList = [];
      let j = {
        deptId: th.deptId,
        doctorId: th.doctorId,
        month: `${th.curDate.getFullYear()}-${th.jiaLing(th.curDate.getMonth() + 1)}`,
      };
      th.$api.getDoctorScheduleByMonth(j).then((res) => {
        if (res.executed) {
          let data1 = res.dataBody[0];
          let arr = [];
          for (let i = 0; i < data1.weekDay; i++) {
            let j = {
              isEmpty: true,
            };
            arr.push(j);
          }
          for (let i = 0; i < res.dataBody.length; i++) {
            let data = res.dataBody[i];
            if (data.weekDay > 0 && data.weekDay % 6 == 0) {
              arr.push(data);
              arrayList.push(arr);
              arr = [];
            } else {
              arr.push(data);
            }
          }
          //
          arrayList.push(arr);
          th.tableList = arrayList;
        }
      });
    },
    //点击号源时间
    onClickTime(obj, index) {
      let th = this;
      th.curTimeObj.index = index;
      obj["dateStr"] = th.curObj.date;
      th.curTimeObj.obj = obj;
    },
    onOpen() {
      let th = this;
      th.$nextTick(function () {
        //查找本月排班信息
        th.curDate = new Date();
        th.getDoctorScheduleByMonth();
      });
    },
    onClose() {
      let th = this;
      th.haoSource = [];
      th.tableList = [];
      th.curObj = null;
      th.curTimeObj.index = -1;
      th.curTimeObj.obj = null;
      th.$emit("input", false);
    },
    jiaLing(value) {
      if (value < 10) value = `0` + value;
      return value;
    },
  },
};
</script>
<style lang="scss" scoped>
.resTimeHead {
  text-align: center;
  font-weight: bold;
}
hr {
  border: 0;
  height: 1px;
  background: #ddd;
}
.item-box {
  text-align: center;
  height: 72px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border-radius: 4px;
  &:hover {
    cursor: pointer;
    background-color: #c1e6de;
  }
}
.item-box.item-box-cur {
  color: #fff;
  background-color: #1dab8e;
}
</style>


